<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div> 
            <!--v-collapse="true"-->
            <el-form :model="formInline" class="formInline" ref="formInline" :rules="rules" label-width="90px" slot="form">          
                 <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="所属省" prop="fProvinceId">
                            <province v-model="formInline.fProvinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属市">
                            <city v-model="formInline.fCityId" :province="formInline.fProvinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区县">
                            <region v-model="formInline.fAreaId" :city="formInline.fCityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41"> 
                    <el-col :span="8">
                        <el-form-item label="学校名称">
                             <school v-model="formInline.schoolName" :provinceId="formInline.fProvinceId" :cityId="formInline.fCityId" :areaId="formInline.fAreaId" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="卡号" prop="sCardNumber">
                            <el-popover placement="top-start" trigger="focus" content="字符长度不大于20个">
                                <el-input v-model="formInline.sCardNumber" placeholder="请输入卡片卡号" :maxlength="10" slot="reference"></el-input>
                            </el-popover>     
                        </el-form-item>
                    </el-col> 
                </el-row>
                <el-row class="top-line">
                    <el-col :span="4" :offset="20"> 
                        <el-button type="primary" class="top-btn" @click="onSubmit('formInline')">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button  @click="goToAdd">单卡绑定</el-button>
                </div>
                <div class="btnPosition">
                    <el-button  @click="showInstruction">卡片说明</el-button>
                </div>
            </div>
            <el-table ref="multipleTable" :data="dataApply" border style="width: 100%" v-loading="loading">
                
                <el-table-column align="center" prop="schoolName" label="学校名称"></el-table-column>

                <el-table-column align="center" prop="areaName" label="所在地区"></el-table-column>

                <el-table-column align="center" prop="sCardNumber" label="卡号"></el-table-column>

                <el-table-column align="center" prop="sCardType"  label="卡片类型">
                    <template scope="scope">
                        <span>{{scope.row.sCardType === '0'? 'IC卡':scope.row.sCardType === '1'? 'ID卡':'--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="left" label="操作">
                    <template scope="scope">
                        <span class="link-src btn" @click = "releaseCard(scope.row)">解绑</span>
                    </template>
                </el-table-column>
                 
            </el-table>
            <div class="pagination-container" style="text-align:right">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="listQuery.total"
                        :current-page.sync="listQuery.page"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
            </div>
        </TableLayout>
        <!--<rejectCheck :dialog="dialog"  @addSuccess='addSuccess' @reviseSuccess='reviseSuccess' ref='addSchoolLeader'></rejectCheck>-->

        <!--卡片说明-->
        <el-dialog title="卡片说明" :visible.sync="dialog.dialogFormVisible1" size="tiny">
            <div class='checkImg2'>
                <div>管理员卡目前只支持智慧班牌使用</div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialog.dialogFormVisible1=false">关闭</el-button>
            </div>
        </el-dialog> 

        <!--绑卡-->
        <bindAdminCard @bindCardState = "bindCardState" v-if="dialog.dialogFormVisible2" :bindCard="bindCard"></bindAdminCard>

    </div>
</template>

<script>
// import {agentRejionDetails, queryCompanyDetail} from 'api/agentMange';
// import {test} from 'api/login';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions } from 'vuex';
import { mapGetters } from 'vuex';
import bindAdminCard from './bindAdminCard';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';
// import { getSchoolName } from '';
import { queryAdministratorsCard, deleteCard } from 'api/cardMangement';
export default{
    name: 'teacherManage',
    components: {TableLayout, bindAdminCard, province, city, region, school},
    data() {
        return {
            formInline: {// form表单数据
                fSchoolId: '',
                schoolName: '',
                fProvinceId: '',
                fAreaId: '',
                fCityId: '',
                sCardNumber: ''
            },
            bindCard: {
                dialogFormVisible: false
            },
            batchBind: {
                dialogFormVisible: false
            },
            dialog: {
                dialogFormVisible1: false,
                dialogFormVisible2: false,
                dialogFormVisible3: false
            },
            dataApply: [],
            loading: false,
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            rules: {
                fProvinceId: [{ required: true, message: '请选择省份', trigger: 'change' }],
                sCardNumber: [
                    { pattern: /^\d{0,20}$/, message: '请输入正确的卡号', trigger: 'change' }
                ]
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    methods: {
        ...mapActions(['ChangePageSize']),

        // 分页
        handleSizeChange(val) {
            this.ChangePageSize(val);
            this.$refs.formInline.validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                }
            })
        },

        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },

        // 获取学校id
        schoolChange(val) {
            this.formInline.fSchoolId = val;
        },

        // 搜索
        searchFetchData() {
            this.loading = true;
            this.formInline.sCardNumber = this.formInline.sCardNumber.replace(/\b(0+)/gi, '');
            queryAdministratorsCard(this.listQuery.page, this.config.pageSize, this.formInline.fSchoolId, 
            this.formInline.fProvinceId, this.formInline.fCityId, this.formInline.fAreaId, 
            this.formInline.sCardNumber).then((response) => {
                if (response.data.status==200) {
                    this.dataApply = response.data.content.list;
                    this.listQuery.total = response.data.content.pagination.total;
                    console.log('total', this.listQuery.total, this.dataApply);
                    this.loading = false;
                } else {
                    this.$message({
                        type: 'warning',
                        message: response.data.errorMsg
                    })
                }
            });
        },
    
        // 更新
        bindCardState(val) {
            if (!val) {
                consoel.log()
            } else {
                // 从新发送请求
                if (!this.formInline.fProvinceId) {
                    return;
                } else {
                    this.searchFetchData();
                }
            }
        },

        // 单卡绑定
        goToAdd() {
            this.dialog.dialogFormVisible2 = true;
            this.bindCard.dialogFormVisible = true;
        }, 

        // 卡片说明
        showInstruction() {
            this.dialog.dialogFormVisible1 = true;
        },

         // 查询
        onSubmit(formInline) {// 表单查询

            this.$refs[formInline].validate((valid) => {
                if (valid) {
                    this.listQuery.page=1;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });

        },

        // 解绑
        releaseCard(row) {
            this.$confirm('确定解除绑定?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                deleteCard(row.pId).then(response => {
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: '解绑成功!'
                    })
                }).catch(() => {
                    this.loading = false;
                });  
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        }
      
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .checkImg2{
        text-align: center;
    }
    .dialogTable{
        text-align: center;
        margin:0 auto;
        // margin-top: 30px;    
        th,td{
            padding: 5px 10px;
            border: solid 1px #ECECEC;
            width: 200px;
            height: 40px;
        }
        th{
            text-align: center;
            background: #f3f3f3;
        }
        tr{
            td{
                text-align: left;
                &:first-child{
                    text-align: center;
                }
            }
        }
    }
}
</style>  
